<template>
  <div id="login">
    <div class="top">
      <!-- 顶部背景图片 -->
      <div class="bgImg"></div>
      <!-- logo图片 -->
      <div class="logo">
        <img class="logo_img" src="../../../assets/logo.png" />
      </div>
    </div>

    <!-- 主体登录表单 -->
    <div class="main">
      <div v-if="state" class="input">
        <van-form>
          <van-field
              class="uname"
              v-model="uname"
              left-icon="phone"
              placeholder="请输入yong'hu"
              :rules="[{ required: true, message: '请填写手机号或邮箱号' }]"
          />
          <van-field
              type="password"
              class="upwd"
              v-model="upwd"
              left-icon="lock"
              placeholder="请输入登录密码"
              :rules="[{ required: true, message: '请填写密码' }]"
          />
          <span
              @click="forgetPwd"
              style="
              position: absolute;
              margin-top: -4vh;
              right: 25px;
              font-size: 10px;
              color: cornflowerblue;
            "
          >忘记密码</span
          >
        </van-form>
      </div>

      <!-- 账号密码登录 -->
      <div v-if="state" class="input">
        <van-form>
          <van-field
              class="uname"
              v-model="uname"
              left-icon="phone"
              placeholder="请输入手机号"
              :rules="[{ required: true, message: '请填写手机号或邮箱号' }]"
          />
          <van-field
              type="password"
              class="upwd"
              v-model="upwd"
              left-icon="lock"
              placeholder="请输入登录密码"
              :rules="[{ required: true, message: '请填写密码' }]"
          />
          <span
              @click="forgetPwd"
              style="
              position: absolute;
              margin-top: -4vh;
              right: 25px;
              font-size: 10px;
              color: cornflowerblue;
            "
          >忘记密码</span
          >
        </van-form>
      </div>

      <!-- 邮箱密码登录 -->
      <div v-else class="input">
        <van-cell-group>
          <van-field
              class="mail"
              v-model="mail"
              left-icon="envelop-o"
              right-icon="close"
              placeholder="请输入登录邮箱"
          />
          <van-field
              type="password"
              class="upwd"
              v-model="upwd"
              left-icon="lock"
              right-icon="eye-o"
              placeholder="请输入登录密码"
          />
          <span
              @click="forgetPwd"
              style="
              position: absolute;
              margin-top: -4vh;
              right: 15px;
              font-size: 10px;
              color: cornflowerblue;
            "
          >忘记密码</span
          >
        </van-cell-group>
      </div>

      <!-- 阅读协议 -->
      <div style="font-size: 10px; margin: 10px 40px">
        <van-radio-group v-model="radio" class="vrg">
<!--          <van-radio name="check">

          </van-radio>-->
          <van-checkbox @click="check" v-model="checkbox" shape="round" style="display: inline-block"/>
          <span
          >我已阅读并同意时光源<span style="color: blue">用户协议</span
          >，<span style="color: blue">隐私协议</span></span
          >
        </van-radio-group>
      </div>

      <!-- 登录注册按钮 -->
      <div class="btn">
          <van-button
              :disabled="agreement"
              round
              color="#020202"
              @click="login"
              style="width: 80%; margin-left: 10%; margin-bottom: 1vh">登录
          </van-button>
        <router-link :to="{path: '/registry'}">
          <van-button round color="#bbbbbb" style="width: 80%; margin-left: 10%"
          >注册</van-button
          >
        </router-link>
      </div>

      <!-- 占位 -->
      <div style="height: 10px"></div>

      <!-- 选择登录方式 -->
      <div class="login_mode" style="font-size: 12px">
        <span @click="phone" style="margin-left: -10vw; margin-right: 17vw">
          <van-icon name="phone" />手机登录
        </span>
        <span>|</span>
        <span @click="email" style="margin-left: 17vw">
          <van-icon name="envelop-o" />邮箱登录
        </span>
      </div>
      <hr />
      <div class="footer"></div>
      <p>SHI&nbsp;&nbsp;GUANG&nbsp;&nbsp;YUAN</p>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import {Toast} from "vant";

export default {
  data() {
    return {
      uname: "",
      mail: "",
      upwd: "",
      radio: "1",
      state: true,
      agreement: true,
      checkbox: false,
    };
  },
  methods: {
    check() {
      this.agreement = !this.agreement;
    },
    phone() {
      this.state = true;
    },
    email() {
      this.state = false;
    },
    login() {
      console.log('11111111111')
      if((this.uname == '' && this.mail == '') || this.upwd == ''){
        Toast("用户名密码不能为空")
        return
      }
      const url = 'http://10.38.46.148:10008/user/sso/login'
      const dat = {
        username: this.uname,
        password: this.upwd,
      }
      console.log(dat)
      this.axios.post(url,dat).then(response => {
        console.log(response.data.status)
        if(response.data.status == 200){
          Toast('登录成功')
          this.$router.push('/homeview/share/sharepage')
        }
        else{
          Toast('登录失败')
        }
      })
    },
    forgetPwd(){
      this.$router.push('/forgetpwd')
    },
  },
};
</script>

<style scoped>
.vrg{
  display: flex;
  justify-content: center;
  align-items: center;
}
#login {
  margin: 0;
  padding: 0;
  position: relative;
}

.bgImg {
  width: 100vw;
  height: 30vh;
  z-index: 1;
  background-image: url("https://img01.yzcdn.cn/vant/cat.jpeg");
  background-size: 100%;
}

.logo {
  position: absolute;
  width: 40vw;
  height: 15vh;
  top: 20vh;
  left: 30vw;
  background-color: #ffffff;
  border-radius: 60%;
  z-index: 2;
}

.main {
  margin-top: -20px;
  margin-left: 3vw;
  width: 90vw;
  border: 2px solid #888888;
  border-radius: 20px;
  z-index: 999;
  padding: 5px;
  background-color: #ffffff;
}

.logo_img {
  width: 150%;
  height: 150%;
  margin-left: -10vw;
  margin-top: -5vh;
}

.van-cell {
  margin-inline-start: 17.5%;
  width: 65%;
}

.input {
  margin-top: 10vh;
}

.btn {
  margin-top: 5vh;
}

.login_mode {
  margin-left: 22vw;
  margin-top: 3vh;
  margin-bottom: 1vh;
  font-size: 16px;
  color: #888888;
}

hr {
  margin: 10px 0;
  border-color: skyblue;
}

p {
  font-size: 16px;
  margin-left: 25vw;
  color: #888888;
}
</style>